<!doctype html>
<head>
<meta charset="utf-8">
<title>Gappro - Admin Theme Template for Backend Applications.</title>
<link href='http://fonts.googleapis.com/css?family=Sintony' rel='stylesheet' type='text/css'>
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet" media="screen">
<link href="css/style-responsive.css" rel="stylesheet" media="screen">
<link href="css/font_awesome/font-awesome.min.css" rel="stylesheet" media="screen">
<link href="css/data_tables/jquery.dataTables_themeroller.css" rel="stylesheet" media="screen">
<link href="css/data_tables/jquery.dataTables.css" rel="stylesheet" media="screen">
<link href="css/rowlink/bootstrap-rowlink.min.css" rel="stylesheet" media="screen">
<link href="css/joyride/joyride-2.0.3.css" rel="stylesheet" media="screen">
<link href="css/handsontable/jquery.handsontable.full.css" rel="stylesheet" media="screen">
<link href="css/leaderboard/jquery.leaderboard-1.0.css" rel="stylesheet" media="screen">
<link href="css/prettify/sons-of-obsidian.css" rel="stylesheet" media="screen">
<meta name="description" content="admin theme template for any backend applications.">
<meta name="author" content="boostbob.github.com">
<meta name="viewport" content="width=device-width,initial-scale=1.0"></head>

<body>
<div class="navbar navbar-inverse">
  <div class="navbar-inner">
    <div class="container-fluid">
      <div class="row-fluid">

        <div class="span8">
          <a href="index.html">
            <img class="brand" src="img/logo.png" alt="">
          </a>
          
          <form class="form-search">
            <input type="text" placeholder="keywords" class="input-medium search-query">
            <button type="submit" class="btn">Search</button>

              <div class="btn-group">
                <a class="btn dropdown-toggle btn-warning" data-toggle="dropdown" href="#">
                  <span><i class="icon-bell"></i></span>
                </a>
                <ul class="dropdown-menu" id="messages-box">
                  <li>
                    <img src="img/avatar2.jpg" alt="">
                    <span class="time">6 mintues ago</span><br>
                    <span class="content">Lorem ipsum et consectetur officia veniam... </span>
                  </li>
                  <li>
                    <img src="img/avatar4.jpg" alt="">
                     <span class="time">12 mintues ago</span><br>
                    <span class="content">Lorem ipsum et consectetur officia veniam... </span>
                  </li>
                  <li>
                    <img src="img/avatar6.jpg" alt="">
                  <span class="time">20 mintues ago</span><br>
                    <span class="content">Lorem ipsum et consectetur officia veniam... </span>
                  </li>
                  <li>
                    <img src="img/avatar8.jpg" alt="">
                    <span class="time">25 mintues ago</span><br>
                    <span class="content">Lorem ipsum et consectetur officia veniam... </span>
                  </li>
                </ul>
            </div>
          </form>
        </div>

        <div class="span4">
          <ul id="top-menu">
            <li>
              <div class="btn-group">
                <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
                  <i class="icon-th-list"></i>
                  <span>Nav List</span>
                  <span class="label label-success">9</span>
                </a>
                <ul class="dropdown-menu">
                  <li><a tabindex="-1" href="#">Leaderbord</a></li>
                  <li><a tabindex="-1" href="#">Excel Table</a></li>
                  <li><a tabindex="-1" href="#">Table Striped</a></li>
                  <li><a tabindex="-1" href="#">Table Borded</a></li>
                  <li><a tabindex="-1" href="#">Table Rowlink</a></li>
                  <li><a tabindex="-1" href="#">Table Condensed</a></li>
                  <li><a tabindex="-1" href="#">Widget Table</a></li>
                  <li><a tabindex="-1" href="#">Table Footer</a></li>
                  <li><a tabindex="-1" href="#">Dynamic Table</a></li>
                </ul> 
              </div>
            </li>
            <li>
              <a href="javascript:void(0)" class="btn">
                <i class="icon-group"></i>
                <span>Groups</span>
              </a>
            </li>
            <li>
              <a href="javascript:void(0)" class="btn">
                <i class="icon-eye-open"></i>
                <span>Website</span>
              </a>
            </li>
            <li>
              <a href="login.html" class="btn">
                <i class="icon-off"></i>
                <span>Logout</span>
              </a>
            </li>
          </ul>
        </div>  

      </div>

      <div id="config-box">
        <a href="javascript:void(0)" class="btn config-button"><i class="icon-cog"></i></a>
        <div class="btn-group">
                  <button class="btn"><i class="icon-refresh"></i> Menu Themes</button>
                  <button data-toggle="dropdown" class="btn btn-inverse dropdown-toggle">
                    <span class="caret"></span>
                  </button>
                  <ul class="dropdown-menu" id="menu_colors">
                    <li><a href="#" data-color="pink">PINK</a></li>
                    <li><a href="#" data-color="green">GREEN</a></li>
                    <li><a href="#" data-color="grey">GREY</a></li>
                    <li><a href="#" data-color="white">WHITE</a></li>
                    <li><a href="#" data-color="orange">ORANGE</a></li>
                    <li><a href="#" data-color="blue">BLUE</a></li>
                    <li><a href="#" data-color="gold">GOLD</a></li>
                    <li><a href="#" data-color="black">DEFAULT</a></li>
                  </ul>
              </div>
              <h4>Backgournd:</h4>
              <ul id="backgrounds">
                <li><a href="javascript:void(0)"><img src="img/backgrounds/1.jpg" alt=""></a></li>
                <li><a href="javascript:void(0)"><img src="img/backgrounds/2.jpg" alt=""></a></li>
                <li><a href="javascript:void(0)"><img src="img/backgrounds/3.jpg" alt=""></a></li>
                <li><a href="javascript:void(0)"><img src="img/backgrounds/4.jpg" alt=""></a></li>
                <li><a href="javascript:void(0)"><img src="img/backgrounds/5.jpg" alt=""></a></li>
                <li><a href="javascript:void(0)"><img src="img/backgrounds/6.jpg" alt=""></a></li>
                <li><a href="javascript:void(0)"><img src="img/backgrounds/7.jpg" alt=""></a></li>
                <li><a href="javascript:void(0)"><img src="img/backgrounds/8.jpg" alt=""></a></li>
                <li><a href="javascript:void(0)"><img src="img/backgrounds/9.jpg" alt=""></a></li>
                <li><a href="javascript:void(0)"><img src="img/backgrounds/10.jpg" alt=""></a></li>
                <li><a href="javascript:void(0)"><img src="img/backgrounds/11.jpg" alt=""></a></li>
                <li><a href="javascript:void(0)"><img src="img/backgrounds/12.jpg" alt=""></a></li>
              </ul>
              <h4>Menu Sub Trigger:</h4>
            <ul id="menu-trigger">
              <li><a href="javascript:void(0)" class="btn" data-trigger="click">Click</a></li>
              <li><a href="javascript:void(0)" class="btn" data-trigger="mouseover">Hover</a></li>
            </ul>
              <h4>Menu Background:</h4>
              <ul id="menu-backgrounds">
                <li><a href="javascript:void(0)"><img src="img/backgrounds/menu1.png" alt=""></a></li>
                <li><a href="javascript:void(0)"><img src="img/backgrounds/menu2.png" alt=""></a></li>
                <li><a href="javascript:void(0)"><img src="img/backgrounds/menu3.png" alt=""></a></li>
                <li><a href="javascript:void(0)"><img src="img/backgrounds/menu4.png" alt=""></a></li>
              </ul>
      </div>

    </div>
  </div>
</div>

<div class="container-fluid" id="main_wrapper">
  <div class="row-fluid">
    <div class="span2" id="sidebar">
      <div id="icon-menu">
        <ul>
          <li class="circle">
            <a href="profile.html" title="Profile">
              <img src="img/avatar9.jpg" alt="">   
            </a>
          </li>
          <li class="filter-box">
            <input type="text" id="menuitem-filter" placeholder="e.g. widget">
          </li>
          <li class="menu-controller">
            <a id="btn-menu-controller" href="javascript:void(0)">
              <span><i class="icon-angle-up"></i></span>
            </a>
          </li>
          <li data-keywords="home,dashboard,index,default,entry">
            <a href="index.html" title="Dashboard">
              <i class="icon-home"></i> <span>Home</span>
            </a>
          </li>
          <li data-keywords="widget,window,block,ui">
            <a href="widget.html" title="Widget" id="widget-menu">
              <i class="icon-th-large"></i> <span>Widget</span>
            </a>
          </li>
          <li class="current" data-keywords="table,data,rowlink,list,ui">
            <a href="tables.html" title="Tables">
              <i class="icon-th-list"></i> <span>Tables</span>
            </a>
          </li>
          <li data-keywords="chart,pie,bar,line,speakline,dynamic,donut,stacked">
            <a href="charts.html" title="Charts">
              <i class="icon-bar-chart"></i> <span>Charts</span>
            </a>
          </li>
          <li data-keywords="forms,editor,wizard,validate,editable,slider,ui">
            <a href="forms.html" title="Forms">
              <i class="icon-credit-card"></i> <span>Forms</span>
              <span class="label label-success">5</span>
            </a>
            <ul class="sub-menus">
              <li><a href="forms.html" title="Forms"> <span>Elements</span> </a> </li>
              <li><a href="editor.html" title="Editor"> <span>Editor</span> </a> </li>
              <li><a href="wizard.html" title="Wizard"> <span>Wizard</span> </a> </li>
              <li><a href="validator.html" title="Validator"> <span>Validator</span> </a> </li>
              <li><a href="editable.html" title="Editable"> <span>Editable</span> </a> </li>
              <li><a href="javascript:void(0)" title="Sub Link">Sub Link</a></li>
            </ul>
          </li>
          <li data-keywords="ui,table,interface,gallery,box,block,widget,timeline,grid">
            <a href="ui.html" title="UI">
              <i class="icon-camera"></i> <span>Interfaces</span>
              <span class="label label-success">12</span>
            </a>
            <ul class="sub-menus">
              <li><a href="ui.html" title="UI"> <span>Elements</span> </a> </li>
              <li><a href="attr.html" title="Attr Box"> <span>Attr Box</span> </a></li>
              <li><a href="cal.html" title="Calendar">Calendar</a></li>
              <li><a href="buttons.html" title="Buttons"> <span>Buttons</span> </a> </li>
              <li><a href="grid.html" title="Grid"> <span>Grid</span> </a> </li>
              <li><a href="timeline.html" title="jQuery Timeline"><span>Timeline</span></a></li>
              <li><a href="tabs.html" title="Tab">Tabs</a></li>
              <li><a id="btn-tour" href="javascript:void(0)" title="Tour Guide">Guide Tour</a></li>
              <li><a href="sliders.html" title="Sliders">Sliders</a></li>
              <li><a href="noty.html" title="Notifications">Notifications</a></li>
              <li><a href="accordion.html" title="Accordion">Accordion</a></li>
              <li><a href="faq.html" title="FAQ">FAQ</a></li>
            </ul> 
          </li>
          <li data-keywords="wizard,typo,text,font">
            <a href="typography.html" title="Typography">
              <i class="icon-font"></i> <span>Typography</span>
            </a>
          </li>         
          <li data-keywords="gallery,login,profile,403,404,error,starter">
            <a href="javascript:void(0)" title="Extra">
              <i class="icon-legal"></i> <span>Extra</span>
              <span class="label label-success">6</span>
            </a>
            <ul class="sub-menus">
              <li><a href="gallery.html" title="Gallery"><i class="icon-picture"></i> Gallery</a></li>  
              <li><a href="login.html" title="login"><i class="icon-user"></i> Login</a></li> 
              <li><a href="profile.html" title="profile"><i class="icon-cog"></i> Profile</a></li>  
              <li><a href="404.html" title="404"><i class="icon-eye-close"></i> 404</a></li>  
              <li><a href="tickets.html" title="Tickets"><i class="icon-list"></i> Tickets</a></li>
              <li><a href="starter.html" title="Starter"><i class="icon-question-sign"></i> Starter</a></li>
            </ul>
          </li>
          <li data-keywords="faq,questions">
            <a href="faq.html">
              <i class="icon-question-sign"></i>
              <span>FAQ</span>
            </a>
          </li>
          <li data-keywords="profile,settings,custom,modal,personal">
            <a href="#settings" role="button" data-toggle="modal" data-target="#settings">
              <i class="icon-cog"></i> <span>Settings</span>
            </a>
            <div id="settings" class="modal hide fade" tabindex="-1" role="dialog"> 
              <div class="modal-header"> 
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
                <h3 id="myModalLabel">Config Box
                </h3> 
              </div> 
              <div class="modal-body"> 
                <form class="form-horizontal" id="basic-form" method="get">

                    <div class="control-group">
                      <label class="control-label">Firstname (required)</label>
                      <div class="controls">
                        <input type="text" name="firstname" id="firstname" placeholder="lisa" required>
                      </div>
                    </div>

                    <div class="control-group">
                      <label class="control-label">lastname (required)</label>
                      <div class="controls">
                        <input type="text" name="lastname" id="lastname" placeholder="joe" required>
                      </div>
                    </div>

                    <div class="control-group">
                      <label class="control-label">email (required)</label>
                      <div class="controls">
                        <input name="email" id="email" type="email" placeholder="lisa@abc.com" required>
                      </div>
                    </div>

                    <div class="control-group">
                      <label class="control-label">Comment (requied)</label>
                      <div class="controls">
                        <textarea name="comment" id="comment" placeholder="balbal blala..." required></textarea>  
                      </div>
                    </div>

                    <div class="form-actions">
                      <button type="submit" class="btn btn-primary" data-dismiss="modal" aria-hidden="true">Save changes</button>
                      <button type="button" class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
                    </div>

                  </form>           
              </div> 
            </div>
          </li>
          <li data-keywords="login,signin,profile,entry">
            <a href="login.html">
              <i class="icon-user"></i>
              <span>Login</span>
            </a>
          </li>
        </ul>
      </div>

      <hr>

      <div id="workspace">
        <a id="btn-restore-all" href="javascript:void(0)" class="btn btn-success"><i class="icon-plus"></i> Restore All</a>
      </div>
    </div>

    <div class="span10" id="main">
      <!--main section-->
      <div class="row-fluid">
        <div class="breadcrumbs-title">
          Tables.
          <div class="pull-right">
            <img src="img/icons/bestseller.png" alt="">
            <span>Balance: $927</span>
          </div>
          <div class="sub">
            Lorem ipsum Esse adipisicing sed fugiat deserunt exercitation ut est aute aliqua amet reprehenderit voluptate irure consequat tempor cupidatat tempor mollit.
          </div>
        </div>
        <ul id="breadcrumbs">
          <li>
            <a href="index.html">
              <span>Home <i class="icon-angle-right"></i></span>
            </a>
          </li>
          <li>
            <a href="index.html">
              <span>Path Here <i class="icon-angle-right"></i></span>
            </a>
          </li>
          <li>
            <a href="index.html">
              <span>Dashboard <i class="icon-map-marker"></i></span>
            </a>
          </li>
        </ul>
      </div>

      <div class="row-fluid">
        <div class="alert alert-info">
                <button data-dismiss="alert" class="close" type="button">×</button>
                <img src="img/icons/info.png" alt=""> 
                Leaderboard lets you compare rankings across different categories.
              </div>

            <div class="leaderboard">
              <div class="row-fluid">
                <h3 class="span12">Product Sales</h3>
              </div>

              <div class="row-fluid">
                <ul class="span3">
                  <li class="title">Product A Sales</li>
                  <li class="rank"></li>
                  <li data-rel="US" data-value="845"><span class="name">United States</span></li>
                  <li data-rel="CA" data-value="454"><span class="name">Canada</span></li>
                  <li data-rel="CN" data-value="345"><span class="name">China</span></li>
                  <li data-rel="AU" data-value="676"><span class="name">Australia</span></li>
                  <li data-rel="BR" data-value="834"><span class="name">Brazil</span></li>
                  <li data-rel="GL" data-value="582"><span class="name">Greeland</span></li>
                  <li data-rel="RU" data-value="224"><span class="name">Russian</span></li>
                  <li data-rel="EE" data-value="342"><span class="name">Estonia</span></li>
                  <li data-rel="ES" data-value="837"><span class="name">Spain</span></li>
                  <li data-rel="GE" data-value="182"><span class="name">Georgia</span></li>
                  <li data-rel="FR" data-value="425"><span class="name">France</span></li>
                  <li data-rel="IS" data-value="322"><span class="name">Iceland</span></li>
                </ul>
                <ul class="span3">
                  <li class="title">Product B Sales</li>
                  <li class="rank"></li>
                  <li data-rel="US" data-value="485"><span class="name">United States</span></li>
                  <li data-rel="CA" data-value="823"><span class="name">Canada</span></li>
                  <li data-rel="CN" data-value="748"><span class="name">China</span></li>
                  <li data-rel="AU" data-value="442"><span class="name">Australia</span></li>
                  <li data-rel="BR" data-value="734"><span class="name">Brazil</span></li>
                  <li data-rel="GL" data-value="254"><span class="name">Greeland</span></li>
                  <li data-rel="RU" data-value="533"><span class="name">Russian</span></li>
                  <li data-rel="EE" data-value="232"><span class="name">Estonia</span></li>
                  <li data-rel="ES" data-value="422"><span class="name">Spain</span></li>
                  <li data-rel="GE" data-value="532"><span class="name">Georgia</span></li>
                  <li data-rel="FR" data-value="422"><span class="name">France</span></li>
                  <li data-rel="IS" data-value="823"><span class="name">Iceland</span></li>
                </ul>
                <ul class="span3">
                  <li class="title">Product C Sales</li>
                  <li class="rank"></li>
                  <li data-rel="US" data-value="874"><span class="name">United States</span></li>
                  <li data-rel="CA" data-value="834"><span class="name">Canada</span></li>
                  <li data-rel="CN" data-value="745"><span class="name">China</span></li>
                  <li data-rel="AU" data-value="634"><span class="name">Australia</span></li>
                  <li data-rel="BR" data-value="732"><span class="name">Brazil</span></li>
                  <li data-rel="GL" data-value="563"><span class="name">Greeland</span></li>
                  <li data-rel="RU" data-value="322"><span class="name">Russian</span></li>
                  <li data-rel="EE" data-value="532"><span class="name">Estonia</span></li>
                  <li data-rel="ES" data-value="321"><span class="name">Spain</span></li>
                  <li data-rel="GE" data-value="123"><span class="name">Georgia</span></li>
                  <li data-rel="FR" data-value="231"><span class="name">France</span></li>
                  <li data-rel="IS" data-value="432"><span class="name">Iceland</span></li>
                </ul>
                <ul class="span3">
                  <li class="title">Product D Sales</li>
                  <li class="rank"></li>
                  <li data-rel="US" data-value="343"><span class="name">United States</span></li>
                  <li data-rel="CA" data-value="563"><span class="name">Canada</span></li>
                  <li data-rel="CN" data-value="673"><span class="name">China</span></li>
                  <li data-rel="AU" data-value="532"><span class="name">Australia</span></li>
                  <li data-rel="BR" data-value="432"><span class="name">Brazil</span></li>
                  <li data-rel="GL" data-value="546"><span class="name">Greeland</span></li>
                  <li data-rel="RU" data-value="575"><span class="name">Russian</span></li>
                  <li data-rel="EE" data-value="432"><span class="name">Estonia</span></li>
                  <li data-rel="ES" data-value="222"><span class="name">Spain</span></li>
                  <li data-rel="GE" data-value="322"><span class="name">Georgia</span></li>
                  <li data-rel="FR" data-value="333"><span class="name">France</span></li>
                  <li data-rel="IS" data-value="732"><span class="name">Iceland</span></li>
                </ul>
              </div>
              
              <div class="row-fluid">
                <div class="total"></div>
              </div>
            </div>
      </div>

      <div class="row-fluid">
        <h4>Excel Sample Table (click to edit)</h4>
        <div id="excel_table"></div>
      </div>

      <div class="row-fluid">
        <h3>Table Striped</h3>
        <table class="table table-bordered table-striped">
                <thead>
                  <tr>
                    <th>GM</th>
                    <th>Assigned</th>
                    <th>Closed</th>
                    <th>Score</th>
                  </tr>
                </thead>

                <tbody>
                  <tr>
                    <td>John</td>
                    <td>565</td>
                    <td>232</td>
                    <td>
                      9.8
                      <span class="label label-success">Perfect</span>
                    </td>
                  </tr>
                  <tr>
                    <td>John</td>
                    <td>565</td>
                    <td>232</td>
                    <td>
                      4.2
                      <span class="label label-warning">Warning</span>
                    </td>
                  </tr>
                  <tr>
                    <td>John</td>
                    <td>565</td>
                    <td>232</td>
                    <td>
                      9.6
                      <span class="label label-success">Perfect</span>
                    </td>
                  </tr>
                  <tr>
                    <td>John</td>
                    <td>565</td>
                    <td>232</td>
                    <td>
                      4.8
                      <span class="label label-warning">Warning</span>
                    </td>
                  </tr>
                  <tr>
                    <td>John</td>
                    <td>565</td>
                    <td>232</td>
                    <td>
                      8.8
                      <span class="label label-info">Good</span>
                    </td>
                  </tr>
                  <tr>
                    <td>John</td>
                    <td>565</td>
                    <td>232</td>
                    <td>
                      2.8
                      <span class="label label-important">Banned</span>
                    </td>
                  </tr>
                </tbody>
              </table>
      </div>

      <div class="row-fluid">
        <h3>Table Borded</h3>
        <table class="table table-bordered">
                <thead>
                  <tr>
                    <th>#</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Username</th>
                    <th>Buttons</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td rowspan="2">1</td>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                    <td>
                      <button class="btn btn-success btn-small" type="button">
                        <i class="icon-heart icon-white"></i>
                      </button>
                      <button class="btn btn-info btn-small" type="button">
                        <i class="icon-edit icon-white"></i>
                      </button>
                      <button class="btn btn-danger btn-small" type="button">
                        <i class="icon-remove icon-white"></i>
                      </button>
                    </td>
                  </tr>
                  <tr>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@TwBootstrap</td>
                    <td>
                      <button class="btn btn-success btn-small" type="button">
                        <i class="icon-heart icon-white"></i>
                      </button>
                      <button class="btn btn-info btn-small" type="button">
                        <i class="icon-edit icon-white"></i>
                      </button>
                      <button class="btn btn-danger btn-small" type="button">
                        <i class="icon-remove icon-white"></i>
                      </button>
                    </td>
                  </tr>
                  <tr>
                    <td>2</td>
                    <td>Jacob</td>
                    <td>Thornton</td>
                    <td>@fat</td>
                    <td>
                      <button class="btn btn-success btn-small" type="button">
                        <i class="icon-heart icon-white"></i>
                      </button>
                      <button class="btn btn-info btn-small btn-small" type="button">
                        <i class="icon-edit icon-white"></i>
                      </button>
                      <button class="btn btn-danger btn-small" type="button">
                        <i class="icon-remove icon-white"></i>
                      </button>
                    </td>
                  </tr>
                  <tr>
                    <td>3</td>
                    <td colspan="2">Larry the Bird</td>
                    <td>@twitter</td>
                    <td>
                      <button class="btn btn-success btn-small" type="button">
                        <i class="icon-heart icon-white"></i>
                      </button>
                      <button class="btn btn-info btn-small" type="button">
                        <i class="icon-edit icon-white"></i>
                      </button>
                      <button class="btn btn-danger btn-small" type="button">
                        <i class="icon-remove icon-white"></i>
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
      </div>

      <div class="row-fluid">
        <h3>Table Rowlink</h3>
        <table class="table table-striped table-bordered">
                <thead>
                  <tr>
                    <th>Name</th>
                    <th>Description</th>
                    <th>Actions</th>
                  </tr>
                </thead>
                <tbody data-provides="rowlink">
                  <tr class="rowlink">
                    <td>Modals</td>
                    <td>
                      A streamlined, but flexible, take on the traditional javascript modal plugin with only the minimum required functionality and smart defaults.
                    </td>
                    <td class="nolink">
                      <a href="#">Action</a>
                    </td>
                  </tr>
                  <tr class="rowlink">
                    <td>Dropdowns</td>
                    <td>
                      Add dropdown menus to nearly anything in Bootstrap with this simple plugin. Bootstrap features full dropdown menu support on in the navbar, tabs, and pills.
                    </td>
                    <td class="nolink">
                      <a href="#">Action</a>
                    </td>
                  </tr>
                  <tr class="rowlink">
                    <td>Scrollspy</td>
                    <td>
                      Use scrollspy to automatically update the links in your navbar to show the current active link based on scroll position.
                    </td>
                    <td class="nolink">
                      <a href="#">Action</a>
                    </td>
                  </tr>
                  <tr class="rowlink">
                    <td>Togglable tabs</td>
                    <td>
                      Use this plugin to make tabs and pills more useful by allowing them to toggle through tabbable panes of local content.
                    </td>
                    <td class="nolink">
                      <a href="#">Action</a>
                    </td>
                  </tr>
                  <tr class="rowlink">
                    <td>Tooltips</td>
                    <td>
                      A new take on the jQuery Tipsy plugin, Tooltips don't rely on images, uss CSS3 for animations, and data-attributes for local title storage.
                    </td>
                    <td class="nolink">
                      <a href="#">Action</a>
                    </td>
                  </tr>
                </tbody>
              </table>
      </div>

      <div class="row-fluid">
        <h3>Condensed Table</h3>
              <table class="table table-condensed">
                <thead>
                  <tr>
                    <th>#</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Username</th>
                    <th>Buttons</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>1</td>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                    <td>
                      <button class="btn btn-success btn-small" type="button">
                        <i class="icon-heart icon-white"></i>
                      </button>
                      <button class="btn btn-info btn-small" type="button">
                        <i class="icon-edit icon-white"></i>
                      </button>
                      <button class="btn btn-danger btn-small" type="button">
                        <i class="icon-remove icon-white"></i>
                      </button>
                    </td>
                  </tr>
                  <tr>
                    <td>2</td>
                    <td>Jacob</td>
                    <td>Thornton</td>
                    <td>@fat</td>
                    <td>
                      <button class="btn btn-success btn-small" type="button">
                        <i class="icon-heart icon-white"></i>
                      </button>
                      <button class="btn btn-info btn-small" type="button">
                        <i class="icon-edit icon-white"></i>
                      </button>
                      <button class="btn btn-danger btn-small" type="button">
                        <i class="icon-remove icon-white"></i>
                      </button>
                    </td>
                  </tr>
                  <tr>
                    <td>3</td>
                    <td colspan="2">Larry the Bird</td>
                    <td>@twitter</td>
                    <td>
                      <button class="btn btn-success btn-small" type="button">
                        <i class="icon-heart icon-white"></i>
                      </button>
                      <button class="btn btn-info btn-small" type="button">
                        <i class="icon-edit icon-white"></i>
                      </button>
                      <button class="btn btn-danger btn-small" type="button">
                        <i class="icon-remove icon-white"></i>
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
      </div>

      <div class="row-fluid">
        <div class="span12">
          <div class="widget widget-table">
            <div class="widget-header">
              <i class="icon-th-list"></i>
              <h3>Default Table with widget</h3>
              <a data-widget-action="thumb"></a>
              <a data-widget-action="full"></a>
              <a data-widget-action="code"></a>
              <a data-widget-action="hide"></a>
              <a data-widget-action="close"></a>
            </div>
            <!-- /widget-header -->

            <div class="widget-content">
              <table class="table">
                <thead>
                  <tr>
                    <th>#</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Username</th>
                    <th>Buttons</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>1</td>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                    <td>
                      <button class="btn btn-success btn-small" type="button">
                        <i class="icon-heart icon-white"></i>
                      </button>
                      <button class="btn btn-info btn-small" type="button">
                        <i class="icon-edit icon-white"></i>
                      </button>
                      <button class="btn btn-danger btn-small" type="button">
                        <i class="icon-remove icon-white"></i>
                      </button>
                    </td>
                  </tr>
                  <tr>
                    <td>2</td>
                    <td>Jacob</td>
                    <td>Thornton</td>
                    <td>@fat</td>
                    <td>
                      <button class="btn btn-success btn-small" type="button">
                        <i class="icon-heart icon-white"></i>
                      </button>
                      <button class="btn btn-info btn-small" type="button">
                        <i class="icon-edit icon-white"></i>
                      </button>
                      <button class="btn btn-danger btn-small" type="button">
                        <i class="icon-remove icon-white"></i>
                      </button>
                    </td>
                  </tr>
                  <tr>
                    <td>3</td>
                    <td>Larry</td>
                    <td>the Bird</td>
                    <td>@twitter</td>
                    <td>
                      <button class="btn btn-success btn-small" type="button">
                        <i class="icon-heart icon-white"></i>
                      </button>
                      <button class="btn btn-info btn-small" type="button">
                        <i class="icon-edit icon-white"></i>
                      </button>
                      <button class="btn btn-danger btn-small" type="button">
                        <i class="icon-remove icon-white"></i>
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <!-- /widget-content --> </div>
        </div>
      </div>

      <div class="row-fluid">
        <div class="span12">
          <div class="widget widget-table">
            <div class="widget-header">
              <i class="icon-th-list"></i>
              <h3>Striped Table with Footer</h3>
              <a data-widget-action="thumb"></a>
              <a data-widget-action="full"></a>
              <a data-widget-action="code"></a>
              <a data-widget-action="hide"></a>
              <a data-widget-action="close"></a>
            </div>
            <!-- /widget-header -->

            <div class="widget-content">
              <table class="table table-bordered table-striped">
                <thead>
                  <tr>
                    <th>Game Region</th>
                    <th>Locale</th>
                    <th>Udids</th>
                    <th>Paid(%)</th>
                    <th>Per User</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>World 1</td>
                    <td>English</td>
                    <td>1123</td>
                    <td>2.6%</td>
                    <td>$0.32</td>
                  </tr>
                  <tr>
                    <td>World 2</td>
                    <td>Japan</td>
                    <td>927</td>
                    <td>1.9%</td>
                    <td>$0.21</td>
                  </tr>
                  <tr>
                    <td>World 3</td>
                    <td>French</td>
                    <td>834</td>
                    <td>2.4%</td>
                    <td>$0.29</td>
                  </tr>
                  <tr>
                    <td>World 4</td>
                    <td>Deutsch</td>
                    <td>625</td>
                    <td>1.8%</td>
                    <td>$0.13</td>
                  </tr>
                  <tr>
                    <td>World 5</td>
                    <td>Korean</td>
                    <td>593</td>
                    <td>1.5%</td>
                    <td>$0.27</td>
                  </tr>
                  <tr>
                    <td>World 6</td>
                    <td>Others</td>
                    <td>324</td>
                    <td>1.2%</td>
                    <td>$0.19</td>
                  </tr>
                </tbody>
              </table>
            </div>
            <!-- /widget-content -->
            <div class="widget-footer">
              <p>Footer goes here.</p>
            </div>

          </div>
        </div>
      </div>

      <div class="row-fluid">
        <div class="span12">
          <div class="widget">
            <div class="widget-header">
              <i class="icon-th-list"></i>
              <h3>DataGrid (Dynamic Tables)</h3>
              <a data-widget-action="thumb"></a>
              <a data-widget-action="full"></a>
              <a data-widget-action="code"></a>
              <a data-widget-action="hide"></a>
              <a data-widget-action="close"></a>
            </div>
            <!-- /widget-header -->

            <div class="widget-content">
              <div>
                <table class="table table-bordered table-striped" id="demo_table">
                  <thead>
                    <tr>
                      <th>Rendering engine</th>
                      <th>Browser</th>
                      <th>Platform(s)</th>
                      <th>Engine version</th>
                      <th>CSS grade</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr class="odd gradeX">
                      <td>Trident</td>
                      <td>
                        Internet
                         Explorer 4.0
                      </td>
                      <td>Win 95+</td>
                      <td class="center">4</td>
                      <td class="center">X</td>
                    </tr>
                    <tr class="even gradeC">
                      <td>Trident</td>
                      <td>
                        Internet
                         Explorer 5.0
                      </td>
                      <td>Win 95+</td>
                      <td class="center">5</td>
                      <td class="center">C</td>
                    </tr>
                    <tr class="odd gradeA">
                      <td>Trident</td>
                      <td>
                        Internet
                         Explorer 5.5
                      </td>
                      <td>Win 95+</td>
                      <td class="center">5.5</td>
                      <td class="center">A</td>
                    </tr>
                    <tr class="even gradeA">
                      <td>Trident</td>
                      <td>
                        Internet
                         Explorer 6
                      </td>
                      <td>Win 98+</td>
                      <td class="center">6</td>
                      <td class="center">A</td>
                    </tr>
                    <tr class="odd gradeA">
                      <td>Trident</td>
                      <td>Internet Explorer 7</td>
                      <td>Win XP SP2+</td>
                      <td class="center">7</td>
                      <td class="center">A</td>
                    </tr>
                    <tr class="even gradeA">
                      <td>Trident</td>
                      <td>AOL browser (AOL desktop)</td>
                      <td>Win XP</td>
                      <td class="center">6</td>
                      <td class="center">A</td>
                    </tr>
                    <tr class="gradeA">
                      <td>Gecko</td>
                      <td>Firefox 1.0</td>
                      <td>Win 98+ / OSX.2+</td>
                      <td class="center">1.7</td>
                      <td class="center">A</td>
                    </tr>
                    <tr class="gradeA">
                      <td>Gecko</td>
                      <td>Firefox 1.5</td>
                      <td>Win 98+ / OSX.2+</td>
                      <td class="center">1.8</td>
                      <td class="center">A</td>
                    </tr>
                    <tr class="gradeA">
                      <td>Gecko</td>
                      <td>Firefox 2.0</td>
                      <td>Win 98+ / OSX.2+</td>
                      <td class="center">1.8</td>
                      <td class="center">A</td>
                    </tr>
                    <tr class="gradeA">
                      <td>Gecko</td>
                      <td>Firefox 3.0</td>
                      <td>Win 2k+ / OSX.3+</td>
                      <td class="center">1.9</td>
                      <td class="center">A</td>
                    </tr>
                    <tr class="gradeA">
                      <td>Gecko</td>
                      <td>Camino 1.0</td>
                      <td>OSX.2+</td>
                      <td class="center">1.8</td>
                      <td class="center">A</td>
                    </tr>
                    <tr class="gradeA">
                      <td>Gecko</td>
                      <td>Camino 1.5</td>
                      <td>OSX.3+</td>
                      <td class="center">1.8</td>
                      <td class="center">A</td>
                    </tr>
                    <tr class="gradeA">
                      <td>Gecko</td>
                      <td>Netscape 7.2</td>
                      <td>Win 95+ / Mac OS 8.6-9.2</td>
                      <td class="center">1.7</td>
                      <td class="center">A</td>
                    </tr>
                    <tr class="gradeA">
                      <td>Gecko</td>
                      <td>Netscape Browser 8</td>
                      <td>Win 98SE+</td>
                      <td class="center">1.7</td>
                      <td class="center">A</td>
                    </tr>
                    <tr class="gradeA">
                      <td>Gecko</td>
                      <td>Netscape Navigator 9</td>
                      <td>Win 98+ / OSX.2+</td>
                      <td class="center">1.8</td>
                      <td class="center">A</td>
                    </tr>
                    <tr class="gradeA">
                      <td>Gecko</td>
                      <td>Mozilla 1.0</td>
                      <td>Win 95+ / OSX.1+</td>
                      <td class="center">1</td>
                      <td class="center">A</td>
                    </tr>
                    <tr class="gradeA">
                      <td>Gecko</td>
                      <td>Mozilla 1.1</td>
                      <td>Win 95+ / OSX.1+</td>
                      <td class="center">1.1</td>
                      <td class="center">A</td>
                    </tr>
                    <tr class="gradeA">
                      <td>Gecko</td>
                      <td>Mozilla 1.2</td>
                      <td>Win 95+ / OSX.1+</td>
                      <td class="center">1.2</td>
                      <td class="center">A</td>
                    </tr>
                    <tr class="gradeA">
                      <td>Gecko</td>
                      <td>Mozilla 1.3</td>
                      <td>Win 95+ / OSX.1+</td>
                      <td class="center">1.3</td>
                      <td class="center">A</td>
                    </tr>
                    <tr class="gradeA">
                      <td>Gecko</td>
                      <td>Mozilla 1.4</td>
                      <td>Win 95+ / OSX.1+</td>
                      <td class="center">1.4</td>
                      <td class="center">A</td>
                    </tr>
                    <tr class="gradeA">
                      <td>Gecko</td>
                      <td>Mozilla 1.5</td>
                      <td>Win 95+ / OSX.1+</td>
                      <td class="center">1.5</td>
                      <td class="center">A</td>
                    </tr>
                    <tr class="gradeA">
                      <td>Gecko</td>
                      <td>Mozilla 1.6</td>
                      <td>Win 95+ / OSX.1+</td>
                      <td class="center">1.6</td>
                      <td class="center">A</td>
                    </tr>
                    <tr class="gradeA">
                      <td>Gecko</td>
                      <td>Mozilla 1.7</td>
                      <td>Win 98+ / OSX.1+</td>
                      <td class="center">1.7</td>
                      <td class="center">A</td>
                    </tr>
                    <tr class="gradeA">
                      <td>Gecko</td>
                      <td>Mozilla 1.8</td>
                      <td>Win 98+ / OSX.1+</td>
                      <td class="center">1.8</td>
                      <td class="center">A</td>
                    </tr>
                    <tr class="gradeA">
                      <td>Gecko</td>
                      <td>Seamonkey 1.1</td>
                      <td>Win 98+ / OSX.2+</td>
                      <td class="center">1.8</td>
                      <td class="center">A</td>
                    </tr>
                    <tr class="gradeA">
                      <td>Gecko</td>
                      <td>Epiphany 2.20</td>
                      <td>Gnome</td>
                      <td class="center">1.8</td>
                      <td class="center">A</td>
                    </tr>
                    <tr class="gradeA">
                      <td>Webkit</td>
                      <td>Safari 1.2</td>
                      <td>OSX.3</td>
                      <td class="center">125.5</td>
                      <td class="center">A</td>
                    </tr>
                    <tr class="gradeA">
                      <td>Webkit</td>
                      <td>Safari 1.3</td>
                      <td>OSX.3</td>
                      <td class="center">312.8</td>
                      <td class="center">A</td>
                    </tr>
                    <tr class="gradeA">
                      <td>Webkit</td>
                      <td>Safari 2.0</td>
                      <td>OSX.4+</td>
                      <td class="center">419.3</td>
                      <td class="center">A</td>
                    </tr>
                    <tr class="gradeA">
                      <td>Webkit</td>
                      <td>Safari 3.0</td>
                      <td>OSX.4+</td>
                      <td class="center">522.1</td>
                      <td class="center">A</td>
                    </tr>
                    <tr class="gradeA">
                      <td>Webkit</td>
                      <td>OmniWeb 5.5</td>
                      <td>OSX.4+</td>
                      <td class="center">420</td>
                      <td class="center">A</td>
                    </tr>
                    <tr class="gradeA">
                      <td>Webkit</td>
                      <td>iPod Touch / iPhone</td>
                      <td>iPod</td>
                      <td class="center">420.1</td>
                      <td class="center">A</td>
                    </tr>
                    <tr class="gradeA">
                      <td>Webkit</td>
                      <td>S60</td>
                      <td>S60</td>
                      <td class="center">413</td>
                      <td class="center">A</td>
                    </tr>
                    <tr class="gradeA">
                      <td>Presto</td>
                      <td>Opera 7.0</td>
                      <td>Win 95+ / OSX.1+</td>
                      <td class="center">-</td>
                      <td class="center">A</td>
                    </tr>
                    <tr class="gradeA">
                      <td>Presto</td>
                      <td>Opera 7.5</td>
                      <td>Win 95+ / OSX.2+</td>
                      <td class="center">-</td>
                      <td class="center">A</td>
                    </tr>
                    <tr class="gradeA">
                      <td>Presto</td>
                      <td>Opera 8.0</td>
                      <td>Win 95+ / OSX.2+</td>
                      <td class="center">-</td>
                      <td class="center">A</td>
                    </tr>
                    <tr class="gradeA">
                      <td>Presto</td>
                      <td>Opera 8.5</td>
                      <td>Win 95+ / OSX.2+</td>
                      <td class="center">-</td>
                      <td class="center">A</td>
                    </tr>
                    <tr class="gradeA">
                      <td>Presto</td>
                      <td>Opera 9.0</td>
                      <td>Win 95+ / OSX.3+</td>
                      <td class="center">-</td>
                      <td class="center">A</td>
                    </tr>
                    <tr class="gradeA">
                      <td>Presto</td>
                      <td>Opera 9.2</td>
                      <td>Win 88+ / OSX.3+</td>
                      <td class="center">-</td>
                      <td class="center">A</td>
                    </tr>
                    <tr class="gradeA">
                      <td>Presto</td>
                      <td>Opera 9.5</td>
                      <td>Win 88+ / OSX.3+</td>
                      <td class="center">-</td>
                      <td class="center">A</td>
                    </tr>
                    <tr class="gradeA">
                      <td>Presto</td>
                      <td>Opera for Wii</td>
                      <td>Wii</td>
                      <td class="center">-</td>
                      <td class="center">A</td>
                    </tr>
                    <tr class="gradeA">
                      <td>Presto</td>
                      <td>Nokia N800</td>
                      <td>N800</td>
                      <td class="center">-</td>
                      <td class="center">A</td>
                    </tr>
                    <tr class="gradeA">
                      <td>Presto</td>
                      <td>Nintendo DS browser</td>
                      <td>Nintendo DS</td>
                      <td class="center">8.5</td>
                      <td class="center">
                        C/A
                        <sup>1</sup>
                      </td>
                    </tr>
                    <tr class="gradeC">
                      <td>KHTML</td>
                      <td>Konqureror 3.1</td>
                      <td>KDE 3.1</td>
                      <td class="center">3.1</td>
                      <td class="center">C</td>
                    </tr>
                    <tr class="gradeA">
                      <td>KHTML</td>
                      <td>Konqureror 3.3</td>
                      <td>KDE 3.3</td>
                      <td class="center">3.3</td>
                      <td class="center">A</td>
                    </tr>
                    <tr class="gradeA">
                      <td>KHTML</td>
                      <td>Konqureror 3.5</td>
                      <td>KDE 3.5</td>
                      <td class="center">3.5</td>
                      <td class="center">A</td>
                    </tr>
                    <tr class="gradeX">
                      <td>Tasman</td>
                      <td>Internet Explorer 4.5</td>
                      <td>Mac OS 8-9</td>
                      <td class="center">-</td>
                      <td class="center">X</td>
                    </tr>
                    <tr class="gradeC">
                      <td>Tasman</td>
                      <td>Internet Explorer 5.1</td>
                      <td>Mac OS 7.6-9</td>
                      <td class="center">1</td>
                      <td class="center">C</td>
                    </tr>
                    <tr class="gradeC">
                      <td>Tasman</td>
                      <td>Internet Explorer 5.2</td>
                      <td>Mac OS 8-X</td>
                      <td class="center">1</td>
                      <td class="center">C</td>
                    </tr>
                    <tr class="gradeA">
                      <td>Misc</td>
                      <td>NetFront 3.1</td>
                      <td>Embedded devices</td>
                      <td class="center">-</td>
                      <td class="center">C</td>
                    </tr>
                    <tr class="gradeA">
                      <td>Misc</td>
                      <td>NetFront 3.4</td>
                      <td>Embedded devices</td>
                      <td class="center">-</td>
                      <td class="center">A</td>
                    </tr>
                    <tr class="gradeX">
                      <td>Misc</td>
                      <td>Dillo 0.8</td>
                      <td>Embedded devices</td>
                      <td class="center">-</td>
                      <td class="center">X</td>
                    </tr>
                    <tr class="gradeX">
                      <td>Misc</td>
                      <td>Links</td>
                      <td>Text only</td>
                      <td class="center">-</td>
                      <td class="center">X</td>
                    </tr>
                    <tr class="gradeX">
                      <td>Misc</td>
                      <td>Lynx</td>
                      <td>Text only</td>
                      <td class="center">-</td>
                      <td class="center">X</td>
                    </tr>
                    <tr class="gradeC">
                      <td>Misc</td>
                      <td>IE Mobile</td>
                      <td>Windows Mobile 6</td>
                      <td class="center">-</td>
                      <td class="center">C</td>
                    </tr>
                    <tr class="gradeC">
                      <td>Misc</td>
                      <td>PSP browser</td>
                      <td>PSP</td>
                      <td class="center">-</td>
                      <td class="center">C</td>
                    </tr>
                    <tr class="gradeU">
                      <td>Other browsers</td>
                      <td>All others</td>
                      <td>-</td>
                      <td class="center">-</td>
                      <td class="center">U</td>
                    </tr>
                  </tbody>
                  <tfoot>
                    <tr>
                      <th>Rendering engine</th>
                      <th>Browser</th>
                      <th>Platform(s)</th>
                      <th>Engine version</th>
                      <th>CSS grade</th>
                    </tr>
                  </tfoot>
                </table>
              </div>
              <br>
              <br></div>
            <!-- /widget-content --> </div>

        </div>
      </div>
    </div>
  </div>
</div>

<div id="back-top">
  <a href="javascript:void(0)"><i class="icon-angle-up"></i></a>
</div>

<div class="copyright">
  <p>Copyright &copy; Your Company 2013. All rights reserved.</p>
</div>

<ol id="tour">
  <li data-class="filter-box" data-text="Next Please">
    <h5>Welcome to gappro!</h5>
    <p>Follow me please, type 'widget' to filter menu.</p>
  </li>

  <li data-class="filter-box" data-text="Next Please">
    <h5>Did you see?</h5>
    <p>Focus input box, then press 'ESC' key please.</p>
  </li> 

  <li data-class="menu-controller" data-text="Next Please">
    <h5>Hide menu items.</h5>
    <p>Click now, you can working with workspace.</p>
  </li> 

  <li data-class="menu-controller" data-text="Next Please">
    <h5>Redo it.</h5>
    <p>Click again to show menu.</p>
  </li> 

  <li data-id="widget-menu" data-text="Next Please">
    <h5>Move mouse to widget icon.</h5>
    <p>Drag widget-icon to top bar, then drop it.</p>
  </li>

  <li data-id="messages-box" data-text="Finish Tour" data-options="tipLocation:right">
    <h5>You have created a persistent fav-link.</h5>
    <p>Jump to another page to test it, or drag again to remove it.</p>
  </li>
</ol>

<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/modernizr.mq.js"></script>
<script src="js-webshim/extras/modernizr-custom.js"></script>
<script src="js-webshim/polyfiller.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery-ui-1.10.2.min.js"></script>
<script src="js/prettify/prettify.js"></script>
<script src="js/format/html-format.js"></script>
<script src="js/data_tables/jquery.dataTables.js"></script>
<script src="js/rowlink/bootstrap-rowlink.min.js"></script>
<script src="js/bootstrap_growl/jquery.bootstrap-growl.min.js"></script>
<script src="js/tsort/jquery.tinysort.min.js"></script>
<script src="js/joyride/jquery.joyride-2.0.3.js"></script>
<script src="js/handsontable/jquery.handsontable.full.js"></script>
<script src="js/jstorage/json2.js"></script>
<script src="js/jstorage/jstorage.min.js"></script>
<script src="js/leaderboard/jquery.leaderboard-1.0.min.js"></script>
<script src="js/gappro/config.js"></script>
<script src="js/gappro/gappro.js"></script>
<script src="js/application.js"></script>
<script src="js/tables.js"></script>
<script src="js/fix/ios-orientationchange-fix.js"></script>
</body>
</html>